<template>
  <view class="myCoupon">
    <u-sticky bg-color="#fff">
      <u-tabs :list="tabList" line-width="30" line-height="7" :line-color="`url(`+lineBg+`) 100% 100%`" active-style="color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'" inactive-style="color: '#606266',transform: 'scale(1)'" item-style="height: 44px;width: 28%;" @click="switchTab" />
    </u-sticky>
    <view class="coupons">
      <u-loading-icon :show="loading" />
      <view v-for="(item, index) in couponList" :key="index" class="item" :class="currentTab==2?'coupon-use':''" @touchstart="touchStart" @tap="multipleTap(index)" @longtap="longTap(index)" @touchend="touchEnd">
        <view class="coupon-box">
          <view v-if="currentTab==1 && item.choose" class="choose">
            <view class="title">选中批量核销</view>
          </view>
          <view class="coupon-text" :class="currentTab==2 ? 'use-text' : ''">
            <view class="coupon-term">{{ item.name }}</view>
            <view class="coupon-rule">{{ item.couponRule }}</view>
            <view class="coupon-time">{{ item.couponValidS }}至{{ item.couponValidE }}使用</view>
          </view>
          <view class="coupon-text2">
            <view class="coupon-money">￥<text class="coupon-num">{{ item.couponMoney }}</text></view>
            <view v-if="currentTab == 1" class="coupon-but">未使用</view>
            <view v-if="currentTab == 2" class="coupon-but use-text">已使用</view>
            <view v-if="currentTab == 3" class="coupon-but use-text">已过期</view>
          </view>
          <view v-if="currentTab==1" class="coupon-new" />
        </view>
      </view>
    </view>
    <view v-if="batchRedeem && currentTab == 1" class="choose-redeem-box" @tap="batchRedeem">
      <view class="title">批量兑换</view>
    </view>
    <!-- 无商品显示 -->
    <view v-if="couponList.length===0" class="empty">
      <view class="img">
        <image src="https://mm.wentsoft.com/images/empty-img/not-found.png" />
      </view>
      <view class="text">没有找到对应卡券，看看别的吧</view>
    </view>

    <!-- 没有更多 -->
    <view v-if="isLoadAll && couponList.length>0" class="nomore">没有更多了，看看别的吧</view>
  </view>
</template>

<script>
import { pointCouponEnablePage, pointCouponExpiredPage, pointCouponUsedPage, batchWriteOff } from '@/api/api1'
import { toMyCoupon } from '@/utils/beanHandle.js'
const util = require('@/utils/util')
export default {
  components: {},
  data() {
    return {
      tabList: [], // 券分类
      currentTab: 1, // 选中的分类项(默认为第一个分类)
      searchTableQuery: {
        size: 10,
        current: 1
      },
      searchTableData: {
        records: [],
        total: 0, // 总数
        pages: 0 // 总页数
      },
      couponList: [], // 卡券列表
      isLoadAll: false, // 是否加载全部
      loading: false,
      lineBg: '',

      touchStartTime: 0, // 触摸开始时间
      touchEndTime: 0, // 触摸结束时间
      lastTapTime: 0, // 最后一次单击事件点击发生时间
      lastTapTimeoutFunc: null // 单击事件点击后要触发的函数
    }
  },

  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    }
  },
  onLoad() {
    this.getSection()
  },

  methods: {
    longTap(e) {
      // 长按事件被触发
      var coupon = this.couponList[e]
      if (coupon.status !== 'Y') {
        util.Tips({ title: '此券不可用' })
        return
      }

      // 如果已经[被选中]，更新为[未选中]
      if (coupon.choose) {
        coupon.choose = false
        // 更新[批量兑换是否显示]状态
        var batchRedeem = false
        for (let i = 0; i < this.couponList.length; i++) {
          if (this.couponList[i].choose) {
            batchRedeem = true
            break
          }
        }
        this.batchRedeem = batchRedeem
      } else {
        // 如果已经[未选中]，更新为[被选中]
        coupon.choose = true
        // 更新[批量兑换是否显示]状态
        this.batchRedeem = true
      }
      this.$forceUpdate()
    },
    // 按钮触摸开始触发的事件
    touchStart(e) {
      this.touchStartTime = e.timeStamp
    },
    // 按钮触摸结束触发的事件
    touchEnd(e) {
      this.touchEndTime = e.timeStamp
    },
    multipleTap(e) {
      var that = this
      // 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件
      if (that.touchEndTime - that.touchStartTime < 350) {
        // 当前点击的时间
        var currentTime = e.timeStamp
        var lastTapTime = that.lastTapTime
        // 更新最后一次点击时间
        that.lastTapTime = currentTime

        // 如果两次点击时间在300毫秒内，则认为是双击事件
        if (currentTime - lastTapTime < 300) {
          console.log('double tap')
          // 成功触发双击事件时，取消单击事件的执行
          clearTimeout(that.lastTapTimeoutFunc)
        } else {
          // 单击事件延时300毫秒执行，这和最初的浏览器的点击300ms延时有点像。
          that.lastTapTimeoutFunc = setTimeout(function() {
            // 单击事件
            if (that.batchRedeem) {
              that.longTap(e)
            } else {
              that.couponInfo(e)
            }
          }, 300)
        }
      }
    },
    batchRedeem() {
      const couponNo = this.couponList[0].data.map(x => {
        if (x.choose) {
          return x.code
        }
      }).filter(t => !!t).join(',')
      // 如果只选中一个
      if (couponNo.indexOf(',') === -1) {
        for (let i = 0; i < this.couponList.length; i++) {
          if (this.couponList[i].choose) {
            this.couponInfo(i)
            break
          }
        }
        return
      }
      batchWriteOff({
        membershipCardNumber: this.userInfo.cardNo,
        couponNumber: couponNo,
        phone: this.userInfo.phone
      }).then(res => {
        var item = {
          code: res.data.batchWriteOffNumber,
          name: '批量券'
        }
        uni.$u.route('/pages/my_coupon_info/index', {
          item: item
        })
      })
    },
    couponInfo(e) {
      const item = this.couponList[e]
      if (item.status !== 'Y') {
        util.Tips({ title: '此券不可用' })
        return
      }
      uni.$u.route('/pages/my_coupon_info/index', {
        item: item
      })
    },
    /**
     * 获取平台分类
     */
    getSection() {
      this.tabList = [{
        name: '未使用'
      }, {
        name: '已使用'
      }, {
        name: '已过期'
      }]
      this.tabList.forEach((x, i) => {
        x.id = i + 1
      })
      this.currentTab = 1
      this.getSearchList()
    },
    /**
    * 切换分类
    */
    switchTab(e) {
      if (this.currentTab === e.id) {
        return
      }
      this.currentTab = e.id
      this.searchTableQuery.current = 1
      this.searchTableData = {
        records: [],
        total: 0,
        pages: 0
      }
      this.couponList = []
      this.isLoadAll = false
      this.getSearchList()
    },
    /**
     * 获取卡券列表
     */
    getSearchList() {
      const that = this
      that.isLoadAll = false
      that.loading = true
      if (that.currentTab === 1) {
        pointCouponEnablePage(that.searchTableQuery).then(res => {
          that.loading = false
          that.handle('可用', res)
        })
      } else if (that.currentTab === 2) {
        pointCouponExpiredPage(that.searchTableQuery).then(res => {
          that.loading = false
          that.handle('过期', res)
        })
      } else if (that.currentTab === 3) {
        pointCouponUsedPage(that.searchTableQuery).then(res => {
          that.loading = false
          that.handle('已使用', res)
        })
      }
    },
    handle(desc, res) {
      const that = this
      that.searchTableData = {
        records: res.data.records,
        total: res.data.total, // 总数
        pages: res.data.pages // 总页数
      }
      const resList = res.data.records.map(data => {
        return toMyCoupon(data)
      })
      console.info(desc + '券列表数据：', resList)
      that.couponList = that.couponList.concat(resList)
      if (res.data.current === res.data.pages) {
        this.isLoadAll = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.myCoupon {
  background: #f2f3f7;
  height: calc(100vh);
}
/* 横排券列表 */
.coupons {
  @include flex-center(column);
  gap: 18rpx;
  .item {
    background-image: url('https://mm.wentsoft.com/images/coupon_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 1rpx;
    justify-content: space-between;
    color: #272727;
    position: relative;
    width: 100%;
    height: 214rpx;
    .coupon-box {
      @include flex-space-between;
      align-items: stretch;
      height: 214rpx;
      .choose {
        position: absolute;
        top: 3rpx;
        left: 10rpx;
        width: 99%;
        height: 94%;
        border: 1rpx solid;
        background-color: rgb(77, 75, 75);
        opacity: 0.9;
        border-radius: 17rpx;
        .title {
          width: 230rpx;
          height: 60rpx;
          background-color: #000;
          border-radius: 18rpx;
          font-size: 28rpx;
          line-height: 60rpx;
          position: absolute;
          top: 37%;
          left: 31%;
          text-align: center;
          color: #afafaf;
        }
      }
      .coupon-text {
        width: 380rpx;
        height: 157rpx;
        border: 1rpx solid #ffc29c;
        border-radius: 8rpx;
        margin: 24rpx 32rpx;
        text-align: center;
        padding-right: 23rpx;
        color: #272727;
        .coupon-term {
          margin-top: 25rpx;
          font-size: 30rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .coupon-rule {
          font-size: 22rpx;
          margin-top: 15rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .coupon-time {
          font-size: 22rpx;
          margin-top: 15rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .coupon-text.use-text {
        border: 1rpx solid #e9e9e9;
      }
      .coupon-text2 {
        width: 220rpx;
        color: #ffffff;
        @include flex-center(column);
        .coupon-money {
          font-size: 46rpx;
          margin-top: -7rpx;
          .coupon-num {
            font-size: 60rpx;
          }
        }
        .coupon-but {
          box-sizing: border-box;
          font-size: 18rpx;
          border: 1rpx solid #ffb9a8;
          border-radius: 20rpx;
          text-align: center;
          width: 112rpx;
          height: 37rpx;
          line-height: 36rpx;
          margin: 7rpx auto 0 auto;
        }
        .coupon-but.use-text {
          border: 1rpx solid #e9e9e9;
        }
      }
      .coupon-new {
        background-image: url('https://mm.wentsoft.com/images/coupon_new.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 131rpx;
        height: 135rpx;
        position: absolute;
        top: -33rpx;
        right: -31rpx;
      }
    }
  }
  .item.coupon-use {
    width: 96%;
    background-image: url('');
  }
}
.choose-redeem-box {
  position: fixed;
  width: 100%;
  height: 150rpx;
  bottom: 0;
  background-color: #c8a754;
  z-index: 100;
  .title {
    font-size: 40rpx;
    text-align: center;
    line-height: 150rpx;
  }
}
</style>
